/*
* @Author: Wangxi
* @Date: 2023-06-17 13:56:09
* @LastEditors: Yejing
* @LastEditTime: 2023-07-03 16:12:57
* @Description: desc
*/
<template>
	<view class="product-card-container"
		@click="details.shopIds&&(details.shopIds.length==0)?'':$emit('click',details.id)">
		<view class="masking" v-if="details.shopIds&&(details.shopIds.length==0)">
			<view class="maskingMes">
				{{$t('home.acitiveEnd') }}
			</view>
		</view>
		<view class="img-box">

			<image :style="`width:100%;height:${details.h}rpx;`"
				:src="details.image?$u.file.getMedieUrl(details.image):details.goodsImg? $u.file.getMedieUrl(details.goodsImg):details.images? $u.file.getMedieUrl(details.images):''"
				mode="aspectFill"></image>
		</view>
		<view :class="type=='center'?'center':'product-name'">
			<p class="name overflow">{{ details.goodsName }}</p>
			<p class="overflow intro" v-if="type=='center'">
				{{ details.goodsDesc }}
			</p>
			<p class="price" v-if="details.price !== undefined&&!details.seckillPrice">
				${{ publicJS.toFixed(details.price, 2) }}
			</p>
			<p class="price" v-else>
				${{ publicJS.toFixed(details.seckillPrice, 2) }}
			</p>
			<u-icon v-if="heartFill" name="heart-fill" size="33" color="#FF2D55"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		name: "productCard",
		props: {
			details: {
				default: () => ({}),
				type: Object
			},
			type: {
				type: String,
				default: undefined
			},
			heartFill: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {};
		}
	}
</script>

<style lang="scss" scoped>
	.product-card-container {
		-webkit-column-break-inside: avoid;
		margin-bottom: 20rpx;
		position: relative;

		.masking {
			position: absolute;
			color: #fff;
			z-index: 1;
			display: flex;
			top:0;
			right: 0;
			left: 0;
			bottom: 0;
			background:#666666ba;
			align-items: center;
			justify-content: center;

			.maskingMes {
				word-wrap: break-word;
				text-align: center;
				white-space: normal;
				width: 70px;
				font-size: 15px;
			}
		}

		.product-name {
			.name {
				color: #989AA6;
				margin-top: 5rpx;
				font-size: 28rpx;
			}

			.price {
				color: #3E2F25;
				font-size: 28rpx;
			}
		}

		.center {
			text-align: center;
			color: #000000;

			.intro {
				font-size: 22rpx;
				color: #666666;
				padding: 0 30rpx;

			}
		}

		/deep/ .uicon-heart-fill {
			position: absolute;
			right: 20rpx;
			top: 20rpx !important;
		}

		.overflow {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: normal;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}
	}
</style>